<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="/lession05/login" method="post">
        <div>
            <label for="">用户名</label> <input type="text" name="username">
        </div>
        <div>
            <label for="">密码</label> <input type="text" name="password">
        </div>
        <div>
            <button>提交</button>
        </div>
    </form>
    <script>
        // 登录流程： 用户第一次输入用户名和密码 点击提交 发送请求 此时的请求是带着用户名和密码的
        // 但是登录请求结束 连接断开的时候 下一次的请求服务器还是不知道发送请求者的身份。 这是因为HTTP协议的无状态特点。
        // 于是人们就想了一个办法 在登录的时候 响应头里设置一个字段 set-cookie 当浏览器接受到这个响应头之后 
        // 看到这个字段 就会在浏览器这边生成一个文件 保存对应的值 这个文件叫做cookie 
        // 当下一次这个浏览器发送请求的时候 会自动的携带这个文件中的内容到请求头里，带到服务器上去。 
        // 这个请求头字段叫做cookie  
       
        // cookie:是HTTP协议中规定的用于传递前端和后端之间小数据的一种方式
        // 它是一个HTTP请求头的字段 它也是一个文件 
        // 它的大小有4KB 每一个域名下有20个左右 
        // 它会在发送请求的时候自动的携带到请求头上 数据会被服务器接收 

        // cookie的属性
        // 1 name     名字       
        // 2 value    值 
        // 3 max-age  过期日期 秒值数字 新的属性
        // 3 expires  过期日期 日期字符串 老的属性
        // 4 path     路径
        // 5 domain   域名
        // 6 httponly 前端是否可以获取
        
        // 前端可以设置cookie 后端也可以设置cookie 一般来说是后端设置 前端存储 
        // 前端也是可以设置的 但是设置的cookie前端自己用 

        // 操作cookie: 获取 修改 删除 新增
        // 新增 
        // document.cookie = "b=2"; // 仅仅设置cookie的name和value   document.cookie这个属性很特殊 设置cookie的时候 不会影响其它的cookie
        // document.cookie = "c=3;max-age=1000"; // 设置name value 和 max-age
        // document.cookie = "e=4;max-age=1000;"




        // 获取cookie通过 document.cookie (仅仅只能获取httponly属性为false的)
        // console.log(document.cookie)

    </script>
</body>
</html>